<template>
    <view
        id="goodsBox"
        class="goods-box"
        :style="
            'height: calc(100vh - ' +
            topValue +
            'px);margin-top: ' +
            topValue +
            'px;'
        "
    >
        <!-- 单条单据 -->
        <empty v-if="!goodsLs || goodsLs.length == 0"></empty>
        <el-checkbox-group v-model="checkedCities">
            <view
                class="item"
                v-for="(item, index) in goodsLs"
                :key="index"
                @click="clickItem('1', item, index)"
                @mousedown="downFun(item)"
                @mouseup="upFun"
                :class="[
                    item.id == goodsId ? 'active' : '',
                    checkedCities.length >= 20 &&
                    checkedCities.indexOf(item.id) < 0
                        ? 'pierce-through'
                        : '',
                ]"
            >
                <view v-show="is_batch_operation">
                    <label class="checkbox-list">
                        <el-checkbox
                            class="text-che"
                            :label="item.id"
                            :key="item.id"
                        ></el-checkbox>
                    </label>
                </view>
                <view class="g-item-img">
                    <image
                        :src="item.imgs ? item.imgs : goodsImg"
                        mode="aspectFill"
                    ></image>
                </view>
                <view class="g-info">
                    <view class="good-name">{{ item.title }}</view>
                    <view class="good-stroe" v-if="allowViewStore"
                        >库存：{{ item.qty }}</view
                    >
                    <view class="good-price"
                        ><text>{{
                            md == 5 || md == 12 ? item.cost_bw : item.price
                        }}</text></view
                    >
                    <view class="good-flag" v-if="item.tagsInfo && md == 1">
                        <view
                            :class="'good-flag' + (index1 % 4)"
                            :style="
                                (index1 == 0 &&
                                    item.onsale &&
                                    item.onsale != 1 &&
                                    fItem.title !== '上架') ||
                                fItem.title === '下架'
                                    ? 'background-color: #999'
                                    : ''
                            "
                            v-for="(fItem, index1) in item.tagsInfo"
                            :key="index1"
                            v-show="index1 < 6"
                            @mouseover="onTagMouseOver($event, fItem)"
                            @mouseout="onTagMouseOut($event, fItem)"
                            >{{ fItem.title }}</view
                        >
                    </view>
                </view>
            </view>
        </el-checkbox-group>
        <view class="batch-function" v-show="is_batch_operation">
            <view class="batch-box">
                <view class="checkbox">
                    <label>
                        <el-checkbox v-model="checkAll" @change="checkboxallFun"
                            >全选</el-checkbox
                        >
                    </label>
                </view>
                <div class="operation">
                    <text @click="issueFun()">上下架</text>
                    <!-- <text @click="delgoodsFun()">删除</text> -->
                </div>
            </view>
        </view>
        <uni-popup
            ref="popup"
            background-color="#fff"
            mask-background-color="rgba(0,0,0,0)"
            class="popup-app"
        >
            <view class="popup-content">
                <view class="content-row" @click="batchOperation"
                    ><text class="text">批量操作</text></view
                >
                <view class="content-row" @click="toppingFun"
                    ><text class="text">{{
                        is_istop == 1 ? "取消置顶" : "置顶"
                    }}</text></view
                >
            </view>
        </uni-popup>
        <el-dialog
            title="批量设置上下架"
            :visible.sync="isdialogCloud"
            :append-to-body="true"
            width="400px"
        >
            <view class="isdialog-cloud">
                <el-checkbox-group v-model="cloudArr">
                    <view
                        class="isdialog-row"
                        v-for="(item, index) in yunLs"
                        :key="index"
                    >
                        <label class="isdialog-check">
                            <el-checkbox
                                class="text-che"
                                :label="item.id"
                                :key="item.id"
                                >{{ item.title }}</el-checkbox
                            >
                        </label>
                    </view>
                </el-checkbox-group>
            </view>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isdialogCloud = false">取 消</el-button>
                <el-button type="primary" @click="dialogCloudFun"
                    >确 定</el-button
                >
            </span></el-dialog
        >

        <tagTip ref="tagTip"></tagTip>
    </view>
</template>

<script>
import eventCtrl from "../../js/event/EventCtrl.js";
import util from "../../js/util/Util.js";
import staticConst from "../../js/const/StaticConst.js";
import empty from "../comm/empty.vue";
import tagTip from "../comm/TagTip.vue";
import https from "../../js/https/Https.js";
export default {
    props: [
        "goodsLs",
        "yunLsList",
        "md",
        "isSearching",
        "topValue",
        "allowViewStore",
    ],
    components: { empty, tagTip },
    data() {
        return {
            screenHeight: 0, //屏幕高度
            info: [], //展示的列表数据
            isLoading: false, //防止频繁触发
            bottomDistinct: 200, //距离底部多少像素时触发
            goodsId: null,
            goodsImg: staticConst.GOOD_IMG,
            timeDown: null,
            is_batch_operation: false,
            is_select_all: false,
            checkbox_arr: [],
            checkedCities: [],
            checkAll: false,
            item_id: "",
            is_istop: 0,
            isdialogCloud: false,
            cloudArr: [],
            yunLs: [],
        };
    },
    watch: {
        is_batch_operation(val) {
            if (!val) {
                this.checkedCities = [];
                this.checkAll = false;
            }
        },
    },
    created() {},
    methods: {
        // 提交设置的批量上下架
        async dialogCloudFun() {
            const param = {
                ch: "onsale",
                gdids: this.checkedCities,
                idyun: this.cloudArr, //为空则代表全部下架
            };
            await https.delgoods(param, true);

            // 收集选中的云店
            let yunLsarr = [];
            this.cloudArr.map((vd) => {
                this.yunLs.map((vc) => {
                    if (vd != 0 && vc.id == vd) {
                        yunLsarr.push(vc);
                    }
                });
            });

            // 设置上下架后的标签展示数据
            this.goodsLs.map((v) => {
                this.checkedCities.map((va) => {
                    if (v.id == va) {
                        if (this.cloudArr.length > 0) {
                            v.tagsInfo.map((vb, i) => {
                                if (
                                    this.cloudArr.indexOf("0") > -1 ||
                                    yunLsarr.length > 0
                                ) {
                                    if (vb.onsale == 2) {
                                        vb.onsale = "1";
                                        vb.title = "上架";
                                        vb.type = 0;
                                    }
                                } else {
                                    if (vb.onsale == 1) {
                                        vb.onsale = "2";
                                        vb.title = "下架";
                                        vb.type = 0;
                                    }
                                }
                                if (vb.yunLs) {
                                    v.tagsInfo.splice(i, 1);
                                }
                            });
                            if (yunLsarr.length > 0) {
                                v.tagsInfo.push({
                                    title: `云店${yunLsarr.length}`,
                                    type: 1,
                                    yunLs: yunLsarr,
                                });
                            }
                        } else {
                            v.tagsInfo.map((vb, i) => {
                                if (vb.onsale) {
                                    vb.onsale = "2";
                                    vb.title = "下架";
                                    vb.type = 0;
                                }
                                if (vb.yunLs) {
                                    v.tagsInfo.splice(i, 1);
                                }
                            });
                        }
                    }
                });
            });
            this.checkedCities = [];
            this.isdialogCloud = false;
        },
        // 上下架弹框
        issueFun() {
            if (this.atLeast()) return;
            this.isdialogCloud = true;
            this.cloudArr = [];
            if (this.yunLs.length == 0) {
                this.yunLsList.map((v) => {
                    v.ls.map((vs) => {
                        this.yunLs.push({
                            id: vs.id,
                            title: vs.title + "上架",
                        });
                    });
                });
                this.yunLs.unshift({
                    id: "0",
                    title: "app上架",
                });
            }
        },
        // 全选
        checkboxallFun(val) {
            let arr = [];
            this.goodsLs.map((v) => {
                arr.push(v.id);
            });
            this.checkedCities = val ? arr.slice(-20) : [];
        },
        // 选中列表单项
        checkboxFun(value) {
            console.log(value);
            let checkedCount = this.checkedCities.length;
            this.checkAll = checkedCount == 20;
        },
        // 至少选中一个产品
        atLeast() {
            if (this.checkedCities.length == 0) {
                this.$msg({ title: "至少选择一个产品" });
                return true;
            } else {
                return false;
            }
        },
        // 启动批量操作
        batchOperation() {
            this.is_batch_operation = true;
            const data = {
                is_batch_operation: this.is_batch_operation,
            };
            this.$emit("triggerBatch", data);
            uni.$emit(eventCtrl.OPERATION_CAILBACK);
            this.$refs.popup.close();
        },
        // 删除产品
        delgoodsFun() {
            if (this.atLeast()) return;
            this.$confirm(`确定删除这些产品吗?`, "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const param = {
                    ch: "del",
                    gdids: this.checkedCities,
                };
                await https.delgoods(param, true);
                this.checkedCities.map((vs) => {
                    this.goodsLs.map((v, i) => {
                        if (v.id == vs) {
                            this.goodsLs.splice(i, 1);
                        }
                    });
                });
                this.clickItem("2", this.goodsLs[0], 0);
                this.checkedCities = [];
            });
        },
        // 置顶/取消置顶
        async toppingFun() {
            const param = {
                m_key: "istop",
                m_val: this.item_data.istop == 1 ? 0 : 1,
                gd_ls: this.item_data.id,
                tag_ls: [],
            };
            let arr = [];
            let arrlet = 0;
            await https.setListItemStatus(param, true);
            if (this.item_data.istop == 0) {
                this.goodsLs.map((v, i) => {
                    if (v.id == this.item_data.id) {
                        v.istop = 1;
                        arr = this.goodsLs.splice(i, 1);
                        v.tagsInfo.unshift({
                            istop: 1,
                            title: "置顶",
                            type: 0,
                        });
                    }
                });
                for (let i = 0; i < this.goodsLs.length; i++) {
                    if (this.goodsLs[i].istop == 0) {
                        arrlet = i;
                        break;
                    }
                }
                this.goodsLs.splice(arrlet, 0, arr[0]);
            } else {
                this.goodsLs.map((v, i) => {
                    if (v.id == this.item_data.id) {
                        v.istop = 0;
                        arr = this.goodsLs.splice(i, 1);
                        v.tagsInfo.map((vs, i) => {
                            if (vs.title === "置顶") {
                                v.tagsInfo.splice(i, 1);
                            }
                        });
                    }
                });
                for (let i = 0; i < this.goodsLs.length; i++) {
                    if (this.goodsLs[i].istop == 0) {
                        arrlet = i;
                        break;
                    }
                }
                this.goodsLs.splice(arrlet, 0, arr[0]);
            }
            this.$refs.popup.close();
        },
        // 鼠标按下
        downFun(item) {
            if (this.md == 12) return;
            if (this.is_batch_operation) return;
            this.item_data = item;
            this.is_istop = item.istop;
            this.timeDown = setTimeout(() => {
                this.$refs.popup.open("bottom");
            }, 500);
        },
        // 鼠标松开
        upFun() {
            clearTimeout(this.timeDown);
        },
        // 触发弹框
        popupToggleFun() {},

        /****设置goodid 为 null****/
        setGoodIdIsNull() {
            this.goodsId = null;
        },

        /*** 点击了某个item ***/
        clickItem(type, item, index) {
            if (
                this.checkedCities.length >= 20 &&
                this.checkedCities.indexOf(item.id) < 0
            ) {
                this.$msg({ title: "最多选中20个" });
                return;
            }
            if (this.is_batch_operation) {
                if (this.checkedCities.indexOf(item.id) > -1) {
                    this.checkedCities.splice(
                        this.checkedCities.indexOf(item.id),
                        1
                    );
                } else {
                    this.checkedCities.push(item.id);
                }
            }
            if (this.is_batch_operation) {
                this.checkboxFun(item.id);
            }
            if (type == 1) {
                if (this.goodsId == item.id || this.is_batch_operation) return;
                this.goodsId = item.id;
                this.$emit("setGoodsInfoData", item);
            } else {
                this.goodsId = item.id;
                this.$emit("setGoodsInfoData", item);
            }
        },

        handlerScroll() {
            this.$nextTick(() => {
                var flag = util.scrollData("#goodsBox");
                if (flag) {
                    // 加载数据
                    if (!this.isSearching) {
                        this.$emit("getGoodsList");
                    } else {
                        this.$emit("searchGdsCatAndKwList");
                    }
                }
            });
        },

        /*** 设置产品ID ***/
        setGoodId(id) {
            this.goodsId = id;
        },

        onTagMouseOver(event, item) {
            if (item.type == 0) return;
            let data = {};
            (data.title = "云店"), (data.display = "block");
            data.top = event.pageY + 27;
            data.left = event.currentTarget.offsetLeft; //event.pageX - 140;
            data.list = item.yunLs;
            this.$refs.tagTip.showTip(data);
        },
        onTagMouseOut(event, item) {
            if (item.type == 0) return;
            let data = {};
            data.display = "none";
            this.$refs.tagTip.showTip(data);
        },
    },
    mounted() {
        if (document.querySelector("#goodsBox"))
            document
                .querySelector("#goodsBox")
                .addEventListener("scroll", this.handlerScroll, true);
    },
    destroyed() {
        if (document.querySelector("#goodsBox"))
            document
                .querySelector("#goodsBox")
                .removeEventListener("scroll", this.handlerScroll);
    },
};
</script>
<style lang="scss" scoped>
.isdialog-cloud {
    overflow: auto;
    ::v-deep.checkbox-group {
        margin-right: 10px;
    }
    .isdialog-row {
        .text {
        }
        ::v-deep.isdialog-check {
            .el-checkbox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 40px;
                padding: 0 5px;
                background: #f5f5f5;
                margin-bottom: 10px;
                &:hover {
                    background: #eeebeb;
                }
            }
        }
    }
}
::v-deep.popup-app {
    uni-view:nth-child(1) {
        uni-view:nth-child(2) {
            width: 343px;
            left: 72px !important;
        }
    }
}
.batch-function {
    width: 343px;
    height: 62px;
    background: #f2f2f2;
    position: fixed;
    left: 72px;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 999;

    .batch-box {
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 14px;
    }
    .operation {
        text {
            margin-left: 13px;
            cursor: pointer;
        }
    }
}
.popup-content {
    box-shadow: 0px -2px 11px 0px rgba(118, 118, 118, 0.2);
    .content-row {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px #ececec solid;
        cursor: pointer;
        &:hover {
            background: #f8f8f8;
        }
        text {
            font-size: 16px;
        }
    }
}
</style>
<style lang="scss">
.goods-box {
    width: 343px;
    overflow-y: auto;
    height: calc(100vh - 110px);
    margin-top: 110px;
    outline: none;
    .item {
        padding-top: 5px;
        background: #fff;
        cursor: pointer;
        border-bottom: 1px #efefef solid;
        padding: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        overflow: hidden;
        ::v-deep.checkbox-list {
            margin-right: 10px;
            .el-checkbox__label {
                display: none;
            }
            .text-che {
                pointer-events: none;
            }
            &.pierce-through {
                pointer-events: none;
            }
        }
        .g-item-img {
            width: 100px;
            height: 100px;
            border-radius: 4px;
            overflow: hidden;
            image {
                width: 100px;
                height: 100px;
            }
        }
        .g-info {
            flex: 1;
            padding-left: 10px;
            .good-name {
                max-width: 200px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 18px;
                color: #333;
            }
            .good-stroe {
                font-size: 12px;
                color: #999;
            }
            .good-price {
                font-size: 12px;
                color: red;
                text {
                    font-size: 14px;
                }
            }
            .good-flag {
                display: flex;
                flex-wrap: wrap;
                view {
                    font-size: 10px;
                    padding: 0px 3px;
                    margin-top: 1px;
                    color: #fff;
                    border-radius: 3px;
                    margin-left: 0px;
                    margin-right: 3px;
                }

                .good-flag0 {
                    background-color: #3388ff;
                }
                .good-flag1 {
                    background-color: #f04848;
                }
                .good-flag2 {
                    background-color: #00c569;
                }
                .good-flag3 {
                    background-color: #ff6600;
                }
                .good-flag5 {
                    background-color: #5500ff;
                }
                .good-flag6 {
                    background-color: #00aa00;
                }
            }
        }
    }
    .item:hover {
        &.active {
            background: #f8f8f8;
        }
        background: #f8f8f8;
    }
    .active {
        background: #f8f8f8;
    }
}

.goods-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.goods-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: #ccc; //rgba(0, 0, 0, 0.0);
    scrollbar-arrow-color: red;
}
.goods-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
}
</style>
